<%@ page language="java" import="java.util.*" pageEncoding="utf-8" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>我要出租</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <script src="<%=path%>/statics/js/rem.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/style.css"/>
    <script src="<%=path%>/statics/js/jquery.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/page.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/all.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/loading.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/slick/slick.css"/>
    <script type="text/javascript" src="<%=path%>/statics/js/menu.js"></script>
    <link rel="stylesheet" href="<%=path%>/statics/css/mui.min1.css">
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/app.css"/>
    <link rel="stylesheet" type="text/css" href="<%=path%>/statics/css/mui.picker.min.css"/>
    <link href="<%=path%>/statics/css/mui.picker.css" rel="stylesheet"/>
    <link href="<%=path%>/statics/css/mui.poppicker.css" rel="stylesheet"/>


    <%--city城市--%>
    <%--<link rel="stylesheet" type="text/css" href="../statics/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="../statics/css/area.css"/>--%>

    <%--上传--%>
    <link href="<%=path%>/statics/css/common.css" type="text/css" rel="stylesheet"/>
    <link href="<%=path%>/statics/css/index.css" type="text/css" rel="stylesheet"/>
    <script src="<%=path%>/statics/js/imgUp.js"></script>

    <%--提示框--%>
    <script type="text/javascript" src="<%=path%>/statics/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="<%=path%>/statics/js-kwl/lease.js"></script>
    <script src="<%=path%>/statics/layui/layui.all.js"></script>
    <script type="text/javascript">
        $(window).load(function () {
            $(".loading").addClass("loader-chanage")
            $(".loading").fadeOut(300)
        })
    </script>
    <script>
        $(function(){

        })
    </script>
    <style>
        .service-tie ul li {
            width: 99%;
            margin-left: 0.2rem;
            margin-bottom: .3rem;
            font-size: .32rem;
            line-height: .7rem;
            color: #555555;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-text-overflow: ellipsis;
            white-space: nowrap;
        }

        .service-tie ul li i {
            margin-right: .2rem;
            width: .5rem;
            font-size: .57rem;
            display: inline-block;
            float: left;
        }
    </style>
</head>
<!--loading页开始-->
<div class="loading">
    <div class="loader">
        <div class="loader-inner pacman">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</div>
<!--loading页结束-->
<%
    Object name = session.getAttribute("user");
    if (name == null) {
        out.print("<script>alert('请登录');location='../jsp/sign.jsp'</script>");
    }
%>
<body>
<div id="show">
    <div class="headertwo clearfloat" id="header">
       <%-- <span class="fl box-s">合肥<i class="iconfont icon-iconfontarrowdown-copy"></i></span>--%>
        <p class="fl bt">发布房源</p>
        <a href="#" class="fr"><i class="iconfont icon-sousuo fl"></i></a>
    </div>

    <div class="clearfloat" id="main">
        <div class="lease clearfloat">
            <div class="top clearfloat box-s">
                <i class="iconfont icon-gonggao fl"></i>
                <span class="fl box-s">请填认证写您的房源信息，审核通过后会发布上架！</span>
            </div>
            <form action="<%=path%>/house/lease.html" method="post" name="fabu" enctype="multipart/form-data" id="fabu">
                <div class="land-ctent land-ctenttwo clearfloat">
                    <ul class="mui-table-view">
                        <li class="box-s clearfloat">
                            <p class="tit fl">房屋名称：</p>
                            <input type="text" name="title" id="title" value="" placeholder="请输入房屋名称" class="fl"/>
                        </li>
                        <li class="box-s clearfloat">
                            <p class="tit fl" style="display: inline-block">房屋户型：</p>
                            <input type="text" name="shi" size="4" id="shi"
                                   style="text-align: center;width:10%;border: 1px solid silver;height: 25px;line-height: 25px;margin-left: 40%">
                            &nbsp;<span style="font-size: 0.4rem;display: inline-block;">室</span>&nbsp;
                            <input type="text" name="ting" size="4" id="ting"
                                   style="text-align: center;width:10%;border: 1px solid silver;height: 25px;line-height: 25px;margin-top: 10px;">
                            &nbsp;<span style="font-size: 0.4rem">厅</span>
                        </li>
                        <li class="mui-table-view-cell mui-collapse">
                            <p class="tit fl" style="display: inline-block;">房屋类型：</p>
                            <select name="ftype_id" id="ftype_id"
                                    style="position: absolute;padding-top:0.4rem;display: inline-block;padding-left:60%;font-size: 15px;color:#cbcbcb">
                                <option value="0">--请选择--</option>
                                <c:forEach items="${ftype}" var="f">
                                    <option value="${f.ftype_id}">${f.ftypeName}</option>
                                </c:forEach>
                            </select>
                        </li>
                        <li class="box-s clearfloat">
                            <p class="tit fl">房屋价格：</p>
                            <input type="text" name="price" id="price" value="" placeholder="请输入房屋价格" class="fl"/>
                        </li>
                        <li class="box-s clearfloat">
                            <p class="tit fl">押金：</p>
                            <input type="text" name="yajin" id="yajin" value="" placeholder="请输入房屋押金" class="fl"/>
                        </li>
                        <li class="box-s clearfloat">
                            <p class="tit fl">房屋面积：</p>
                            <input type="text" name="area" id="area" value="" placeholder="请输入房屋面积" class="fl"/>
                        </li>
                        <li class="box-s clearfloat" id='showUserPicker'>
                            <p class="tit fl">房屋设施：</p>
                            <a id="showFacility">
                                <input type="button" value="请选择房屋设施" class="fl day" style="font-size: 0.4rem"
                                       id="facilityPage"/>
                                <input type="hidden" value="" name="facility" id="facility"/>
                                <i class="iconfont icon-arrowright fl"></i>
                            </a>
                        </li>
                        <li class="box-s clearfloat" id=''>
                            <p class="tit fl">房屋图片：</p>
                            <div class="img-box full"
                                 style="border: 1px #f6f6f6 solid;background-color: #fff;width: 100%">
                                <section class=" img-section">
                                    <label
                                            style="color:slategray;font-size: 0.3rem;font-weight: bold;">选择房屋图片：最多可以上传10张图片，马上上传</label>
                                    <div class="z_photo upimg-div clear">
                                        <section class="z_file fl">
                                            <img src="../statics/img/a11.png" class="add-img">
                                            <input type="file" name="upload" id="file" class="file"
                                                   value="" accept="image/jpg,image/jpeg,image/png,image/bmp"
                                                   multiple/>
                                        </section>
                                    </div>
                                </section>
                            </div>
                            <aside class="mask works-mask">
                                <div class="mask-content">
                                    <p class="del-p ">您确定要删除作品图片吗？</p>
                                    <p class="check-p">
                                        <span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span>
                                    </p>
                                </div>
                            </aside>

                        </li>
                        <li class="box-s clearfloat">
                            <jsp:include page="/jsp/city.jsp"/>
                        </li>
                        <li class="box-s clearfloat">
                            <p class="tit fl">房屋地址：</p>
                            <input type="text" name="xxaddress" id="xxaddress" value="" placeholder="请输入房屋详细地址"
                                   class="fl"/>
                        </li>
                        <li class="box-s clearfloat">
                            <p class="tit fl" style="display: inline-block">附近交通：</p>
                            <textarea rows="5" style="margin-left: 20%;width: 75%;margin-top: -10px" name="traffic"
                                      id="traffic"
                                      placeholder="请输入附近交通"></textarea>
                        </li>
                        <li class="box-s clearfloat">
                            <p class="tit fl">房屋说明：</p>
                            <textarea rows="5" style="margin-left: 20%;width: 75%;margin-top: -10px" name="introduce"
                                      id="introduce"
                                      placeholder="请输入房屋详情介绍"></textarea>
                        </li>
                    </ul>
                </div>
                <div class="tiaoli">
                    <input type="checkbox" name="" id="check" value="" checked="checked"/>
                    <label for="check">我已阅读并同意<span>《原宿短租委托协议》</span></label>
                </div>
                <%--<a href="#loginmodal" id="modaltrigger">--%>
                <input type="button" name="" id="addHouse" value="发布房屋" class="btn" />
                <%--</a>--%>
            </form>
        </div>
    </div>
</div>
<jsp:include page="foot.jsp"></jsp:include>

<!--弹窗内容 star-->
<%--<div id="loginmodal" class="box-s loginmodaltwo" style="display:none;">
    <form id="loginform" name="loginform" method="post" action="">
        <div class="center"><input type="submit" name="loginbtn" id="loginbtn" class="flatbtn-blutwo hidemodal" value=""
                                   tabindex="3"></div>
    </form>
    <div class="bottom clearfloat box-s">
        <div class="login-dui clearfloat">
            <p class="tu">
                <img src="../statics/img/dui.png"/>
            </p>
            <p class="tit">
                恭喜您，委托成功！
            </p>
            <p class="fu-tit">
                我们的将会在24小时内为您审核。
            </p>
        </div>
        <input type="button" name="" id="" value="好的，我知道了" class="btn btn1"/>
    </div>
</div>--%>

<%--设施隐藏--%>
<div style="display: none" id="hidden">
    <div class="service-ctent clearfloat">
        <div class="recom-tit clearfloat box-s">
            <p style="display: inline-block;width: 5rem">配置设施</p>
            <a href=""></a>
            <input type="button" onclick="cc()" value="确定" style="background-color: #F16B80;float: right;margin-right: 0.3rem;height: 0.5rem;width: 1rem;border-radius: 0.2rem;display: inline-block;text-align: center" id="checkedFacility;"/>
            <script>
                function cc(){
                    var checkboxs= $("input:checkbox:checked");
                    var zhi="";
                    checkboxs.each(function () {
                        zhi+=$(this).val()+",";
                    })
                    zhi=zhi.substring(0,zhi.length-1);
                    $("#facility").val(zhi);
                    $("#show").show();
                    $("#hidden").hide();
                }
            </script>
        </div>
        <div class="service-tie clearfloat box-s">
            <ul id="ul">
                <li><i class="iconfont icon-chuangdian"></i>床<input type="checkbox" value="床" name="fatility"
                                                                    style="float: right;margin-right: 0.3rem;margin-top: 0.1rem" ></li>
                <li><i class="iconfont icon-dpc"></i>衣柜<input type="checkbox" value="衣柜" name="fatility"
                                                              style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-shafa"></i>沙发<input type="checkbox" name="fatility" value="沙发"
                                                                style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-7"></i>燃气<input type="checkbox" name="fatility" value="燃气"
                                                            style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-xiyiji"></i>洗衣机<input type="checkbox" name="fatility" value="洗衣机"
                                                                  style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-wifi"></i>网络<input type="checkbox" name="fatility" value="网络"
                                                               style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-bingxiang"></i>冰箱<input type="checkbox" name="fatility" value="冰箱"
                                                                    style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-bangongzhuo"></i>书桌<input type="checkbox" name="fatility" value="书桌"
                                                                      style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-kongdiao"></i>空调<input type="checkbox" name="fatility" value="空调"
                                                                   style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-zhuozi"></i>餐桌<input type="checkbox" name="fatility" value="餐桌"
                                                                 style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-yizi"></i>椅子<input type="checkbox" name="fatility" value="椅子"
                                                               style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-weibolu"></i>微波炉<input type="checkbox" name="fatility" value="微波炉"
                                                                   style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-dianshi"></i>电视<input type="checkbox" name="fatility" value="电视"
                                                                  style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-reshui"></i>热水器<input type="checkbox" name="fatility" value="热水器"
                                                                  style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-chugui"></i>橱柜<input type="checkbox" name="fatility" value="橱柜"
                                                                 style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-xiyouyanji"></i>油烟机<input type="checkbox" name="fatility" value="油烟机"
                                                                      style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-gsdt"></i>电梯<input type="checkbox" name="fatility" value="电梯"
                                                               style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-nuanqi"></i>供暖<input type="checkbox" name="fatility" value="供暖"
                                                                 style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-tingchewei"></i>车位<input type="checkbox" name="fatility" value="车位"
                                                                     style="float: right;margin-right: 0.3rem"></li>
                <li><i class="iconfont icon-menjin"></i>门禁<input type="checkbox" name="fatility" value="门禁"
                                                                 style="float: right;margin-right: 0.3rem"></li>
            </ul>
        </div>
    </div>
    <div style="height:2rem;">

    </div>
</div>
</body>


<script type="text/javascript" src="<%=path%>/statics/slick/slick.min.js"></script>
<script type="text/javascript" src="<%=path%>/statics/js/jquery.leanModal.min.js"></script>
<script type="text/javascript" src="<%=path%>/statics/js/tchuang.js"></script>
<script type="text/javascript" src="<%=path%>/statics/js/hmt.js"></script>
<script src="<%=path%>/statics/js/mui.min.js"></script>
<script src="<%=path%>/statics/js/mui.picker.min.js"></script>
<script src="<%=path%>/statics/js/mui.picker.js"></script>
<script src="<%=path%>/statics/js/mui.poppicker.js"></script>
<script src="<%=path%>/statics/js/city.data.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=path%>/statics/js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
<script>
    (function ($) {
        $.init();
        var result = $('#result')[0];
        var btns = $('.btnfour');
        btns.each(function (i, btn) {
            btn.addEventListener('tap', function () {
                var optionsJson = this.getAttribute('data-options') || '{}';
                var options = JSON.parse(optionsJson);
                var id = this.getAttribute('id');
                var picker = new $.DtPicker(options);
                picker.show(function (rs) {
                    result.innerText = '选择结果: ' + rs.text;
                    picker.dispose();
                });
            }, false);
        });
    })(mui);
</script>
</html>
